<template>
    <div class="box">
        <div class="left">
            <!-- 图片，用来展示用户选择的头像 -->
            <el-avatar class="the_img" v-if="this.avatar=='' && photo" shape="circle" :src="photo"></el-avatar>
            <el-avatar class="the_img" v-if="!photo && this.avatar==''" shape="circle" :src="imageUrl"></el-avatar>
            <el-avatar class="the_img" v-if="this.avatar !==''" shape="circle" :src="this.avatar"></el-avatar>
            <!-- 按钮区域 -->
            <div class="btn-box">
                <input type="file" accept="image/*" style="display: none" ref="iptRef" @change="onFileChange" />
                <el-button type="primary" @click="chooseImg">更换头像</el-button>
            </div>
        </div>
        <div class="center">
            <el-form :model="formData" ref="xingxiruleForm" label-width="100px" class="demo-ruleForm" status-icon>
                <el-form-item label="姓名">
                    <el-input v-model="formData.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="formData.sex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                        <el-radio label="保密"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="formData.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="民族">
                    <el-select v-model="formData.nationvalue" filterable placeholder="请选择民族" class="add-nation-input">
                        <el-option v-for="item in nationList" :key="item.value" :label="item.info" :value="item.info">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="证件类型">
                    <el-select v-model="formData.cartType" placeholder="请选择证件类型">
                        <el-option label="居民身份证" value="居民身份证"></el-option>
                        <el-option label="护照" value="护照"></el-option>
                        <el-option label="户口本" value="户口本"></el-option>
                        <el-option label="驾驶证" value="驾驶证"></el-option>
                        <el-option label="其他" value="其他"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="证件号码">
                    <el-input v-model="formData.cart" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="formData.address" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <div style="display: flex;justify-content: center;align-items: center; ">
                        <el-button type="primary" @click="submitForm('xingxiruleForm')" size="small"
                            style="width:50% ;">修改
                        </el-button>
                        <el-button @click="resetFormxingxi('xingxiruleForm')" size="small" style="width:50% ;">重置
                        </el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <div class="right">
            <el-form :model="editData" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
                status-icon>
                <el-form-item label="原密码" prop="oldPwd">
                    <el-input type="password" v-model="editData.oldPwd" placeholder="请输入原密码"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPwd">
                    <el-input type="password" v-model="editData.newPwd" placeholder="请输入新密码"></el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="newPassword2">
                    <el-input type="password" v-model="editData.newPassword2" placeholder="请再次输入新密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <div style="display: flex;justify-content: center;align-items: center; ">
                        <el-button type="primary" @click="updatepassword('ruleForm')" size="small" style="width:50% ;">
                            修改
                        </el-button>
                        <el-button @click="resetFormpassword('ruleForm')" size="small" style="width:50% ;">重置
                        </el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
    import store from '@/store' // 引入store对象
    import { mapGetters } from 'vuex'
    import { updateMyInformationAPI, updatePasswordAPI, updatePhotoAPI } from "@/api";
    export default {
        computed: {
            ...mapGetters(['name', 'sex', 'phone', 'address', 'cartType', 'cart', 'nationvalue', 'photo'])
        },
        data() {
            return {
                avatar: '',
                editData: {
                    oldPwd: '',
                    newPwd: '',
                    newPassword2: '',
                },
                rules: {
                    oldPwd: [
                        { required: true, message: '请输入原密码', trigger: 'blur' },
                        { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
                    ],
                    newPwd: [
                        { required: true, message: '请输入新密码', trigger: 'blur' },
                        { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
                    ],
                    newPassword2: [
                        { required: true, message: '请再次输入新密码', trigger: 'blur' },
                        { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
                    ],
                },
                formData: {
                    id: '',
                    cart: '',
                    nationvalue: '',
                    cartType: '',
                    name: '',
                    sex: '',
                    phone: '',
                    address: ''
                },
                imageUrl: require('../../assets/ren.jpg'),
                rowCenter: {
                    "text-align": "center"
                },
                nationList: [
                    {
                        id: 1,
                        info: "汉族",
                        value: 1,
                    },
                    {
                        id: 2,
                        info: "壮族",
                        value: 2,
                    },
                    {
                        id: 3,
                        info: "满族",
                        value: 3,
                    },
                    {
                        id: 4,
                        info: "回族",
                        value: 4,
                    },
                    {
                        id: 5,
                        info: "苗族",
                        value: 5,
                    },
                    {
                        id: 6,
                        info: "维吾尔族",
                        value: 6,
                    },
                    {
                        id: 7,
                        info: "土家族",
                        value: 7,
                    },
                    {
                        id: 8,
                        info: "彝族",
                        value: 8,
                    },
                    {
                        id: 9,
                        info: "蒙古族",
                        value: 9,
                    },
                    {
                        id: 10,
                        info: "藏族",
                        value: 10,
                    },
                    {
                        id: 11,
                        info: "布依族",
                        value: 11,
                    },
                    {
                        id: 12,
                        info: "侗族",
                        value: 12,
                    },
                    {
                        id: 13,
                        info: "瑶族",
                        value: 13,
                    },
                    {
                        id: 14,
                        info: "朝鲜族",
                        value: 14,
                    },
                    {
                        id: 15,
                        info: "白族",
                        value: 15,
                    },
                    {
                        id: 16,
                        info: "哈尼族",
                        value: 16,
                    },
                    {
                        id: 17,
                        info: "哈萨克族",
                        value: 17,
                    },
                    {
                        id: 18,
                        info: "黎族",
                        value: 18,
                    },
                    {
                        id: 19,
                        info: "傣族",
                        value: 19,
                    },
                    {
                        id: 20,
                        info: "畲族",
                        value: 20,
                    },
                    {
                        id: 21,
                        info: "傈僳族",
                        value: 21,
                    },
                    {
                        id: 22,
                        info: "仡佬族",
                        value: 22,
                    },
                    {
                        id: 23,
                        info: "东乡族",
                        value: 23,
                    },
                    {
                        id: 24,
                        info: "高山族",
                        value: 24,
                    },
                    {
                        id: 25,
                        info: "拉祜族",
                        value: 25,
                    },
                    {
                        id: 26,
                        info: "水族",
                        value: 26,
                    },
                    {
                        id: 27,
                        info: "佤族",
                        value: 27,
                    },
                    {
                        id: 28,
                        info: "纳西族",
                        value: 28,
                    },
                    {
                        id: 29,
                        info: "羌族",
                        value: 29,
                    },
                    {
                        id: 30,
                        info: "土族",
                        value: 30,
                    },
                    {
                        id: 31,
                        info: "仫佬族",
                        value: 31,
                    },
                    {
                        id: 32,
                        info: "锡伯族",
                        value: 32,
                    },
                    {
                        id: 33,
                        info: "柯尔克孜族",
                        value: 33,
                    },
                    {
                        id: 34,
                        info: "达斡尔族",
                        value: 34,
                    },
                    {
                        id: 35,
                        info: "景颇族",
                        value: 35,
                    },
                    {
                        id: 36,
                        info: "毛南族",
                        value: 36,
                    },
                    {
                        id: 37,
                        info: "撒拉族",
                        value: 37,
                    },
                    {
                        id: 38,
                        info: "布朗族",
                        value: 38,
                    },
                    {
                        id: 39,
                        info: "塔吉克族",
                        value: 39,
                    },
                    {
                        id: 40,
                        info: "阿昌族",
                        value: 40,
                    },
                    {
                        id: 41,
                        info: "普米族",
                        value: 41,
                    },
                    {
                        id: 42,
                        info: "鄂温克族",
                        value: 42,
                    },
                    {
                        id: 43,
                        info: "怒族",
                        value: 43,
                    },
                    {
                        id: 44,
                        info: "京族",
                        value: 44,
                    },
                    {
                        id: 45,
                        info: "基诺族",
                        value: 45,
                    },
                    {
                        id: 46,
                        info: "德昂族",
                        value: 46,
                    },
                    {
                        id: 47,
                        info: "保安族",
                        value: 47,
                    },
                    {
                        id: 48,
                        info: "俄罗斯族",
                        value: 48,
                    },
                    {
                        id: 49,
                        info: "裕固族",
                        value: 49,
                    },
                    {
                        id: 50,
                        info: "乌孜别克族",
                        value: 50,
                    },
                    {
                        id: 51,
                        info: "门巴族",
                        value: 51,
                    },
                    {
                        id: 52,
                        info: "鄂伦春族",
                        value: 52,
                    },
                    {
                        id: 53,
                        info: "独龙族",
                        value: 53,
                    },
                    {
                        id: 54,
                        info: "塔塔尔族",
                        value: 54,
                    },
                    {
                        id: 55,
                        info: "赫哲族",
                        value: 55,
                    },
                    {
                        id: 56,
                        info: "珞巴族",
                        value: 56,
                    },
                ],
            }
        },
        created() {
            this.formData.name = this.name
            this.formData.cart = this.cart
            this.formData.cartType = this.cartType
            this.formData.nationvalue = this.nationvalue
            this.formData.sex = this.sex
            this.formData.address = this.address
            this.formData.phone = this.phone
            console.log(this.formData)
        },
        methods: {
            // 选择图片->点击事件->让选择框出现
            chooseImg() {
                // 模拟点击行为
                this.$refs.iptRef.click()
            },
            // 在选择框中选择图片后触发的改变事件
            onFileChange(e) {
                // 获取用户选择的文件列表（伪数组）
                const files = e.target.files
                if (files.length === 0) {
                    // 没有选择图片
                    this.avatar = ''
                } else {
                    // 选择了图片
                    // 1. 创建 FileReader 对象
                    const fr = new FileReader()
                    // 2. 调用 readAsDataURL 函数，读取文件内容
                    fr.readAsDataURL(files[0])
                    // 3. 监听 fr 的 onload 事件
                    fr.onload = async e => {
                        // 4. 通过 e.target.result 获取到读取的结果，值是字符串（base64 格式的字符串）
                        this.avatar = e.target.result
                        // 5. 调用接口, 传递给后台并根据返回结果给用户提示
                        const { data: res } = await updatePhotoAPI(this.avatar)
                        if (res.status == 0) {
                            this.$message.success('更新头像成功！')
                        } else {
                            this.$message.error('更新头像失败！')
                        }
                        store.dispatch('initUserInfo')
                        console.log(res)
                    }
                }
            },
            //修改密码
            async updatepassword() {
                const { data: res } = await updatePasswordAPI(this.editData)
                if (res.status === 0) {
                    this.$message({
                        showClose: true,
                        message: '修改密码成功',
                        type: 'success'
                    });
                } else {
                    this.$message.error(res.message)
                }
                console.log(res)
            },
            //修改个人信息
            async submitForm() {
                this.formData.id = this.$store.state.userInfo.id
                const { data: res } = await updateMyInformationAPI(this.formData)
                if (res.status === 0) {
                    this.$message({
                        showClose: true,
                        message: '修改信息成功',
                        type: 'success'
                    });
                    store.dispatch('initUserInfo')
                    this.$emit('userinfo', '信息填写成功')
                } else {
                    this.$message.error('请填写完整!');
                }
            },
            //重置信息
            resetFormxingxi(value) {
                this.formData.name = ''
                this.formData.cart = ''
                this.formData.cartType = ''
                this.formData.nationvalue = ''
                this.formData.sex = ''
                this.formData.address = ''
                this.formData.phone = ''
            },
            //重置密码
            resetFormpassword(formName) {
                this.$refs[formName].resetFields();
            },
        },
    }
</script>
<style scoped>
    .btn-box {
        margin-top: 10px;
        text-align: center;
    }

    .preview {
        object-fit: cover;
    }

    .the_img {
        width: 250px;
        height: 250px;
        margin-left: 50px;
    }

    /deep/ .el-form-item {
        margin-bottom: 10px;
    }

    .avatar {
        width: 250px;
        height: 250px;
        margin: 0 0 10% 15%;
        display: block;
    }

    .center {
        height: 60%;
        width: 30%;
        display: inline-block;
        margin: 4% 0 0 0;
        float: left;
    }

    .right {
        height: 60%;
        width: 30%;
        display: inline-block;
        float: left;
        margin: 13% 0 0 2%;
    }

    .left {
        height: 60%;
        width: 30%;
        display: inline-block;
        float: left;
        margin: 4% 0 0 5%;
        /* display: flex;
        justify-content: center;
        align-items: center; */
    }

    .box {
        height: 100%;
        width: 99.2%;
        border-radius: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
        background-color: #FFF;
    }
</style>